<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>列表</title>
<link rel="stylesheet" href="css/responsiveslides.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".slides").responsiveSlides({
	        maxwidth: 800,
	        speed: 800
	    });
		/* $(".slides").slidesjs({
			//width:570,
			//height:238,
			play: {
		      active: false,
		        // [boolean] Generate the play and stop buttons.
		        // You cannot use your own buttons. Sorry.
		      effect: "slide",
		        // [string] Can be either "slide" or "fade".
		      interval: 5000,
		        // [number] Time spent on each slide in milliseconds.
		      auto: true,
		        // [boolean] Start playing the slideshow on load.
		      swap: true,
		        // [boolean] show/hide stop and play buttons
		      pauseOnHover: false,
		        // [boolean] pause a playing slideshow on hover
		      restartDelay: 2500
		        // [number] restart delay on inactive slideshow
		    },
		    callback: {
		        loaded: function(number) {
		          // Do something awesome!
		          // Passes start slide number
		          // alert(this);
		        },
		        start: function(number) {
		          // Do something awesome!
		          // Passes slide number at start of animation
		        },
		        complete: function(number) {
		          // Do something awesome!
		          // Passes slide number at end of animation
	        	}
		    }
		}); */
		
		/* $(".slides").css('width',$(this).find('img').attr('width'));
		
		$(".slidesjs-container,.slidesjs-control").css({
			'width':$(this).find('img').attr('width'),
			'height':$(this).find('img').attr('height')
		}); */
	});
</script>
</head>
<body>
	<ul id="content">
		<c:forEach items="${websiteMap}" varStatus="status" var="website">
			<li>
				<div class="websiteName" style="background:${status.index%2==0?'#7cfc00':'#40e0d0'}">${website.key}</div>
				<ul class="slides">
					<c:forEach items="${website.value}" var="picture">
						<li><a href="${picture.navigationUrl}">
							<img alt="正在加载图片" src="${picture.pictureUrl}" 
								width="${picture.width}" height="${picture.height}">
						</a></li>
					</c:forEach>
				</ul>
			</li>
		</c:forEach>
	</ul>
</body>
</html>